---
name: Troubleshooting
route: /troubleshooting
---

# Troubleshooting

## Motions aren't starting

Sometimes an [Motion](/motion) element is reused by React if the markup where the [Motion](/motion) element was rendered didn't change.
If you're rendering two different trees get around this by using [React `key` prop](https://reactjs.org/docs/lists-and-keys.html#keys) to force each [Motion](/motion) to re-mount.
Else think about using the `triggerSelfKey` prop for self targetting.

## TypeError: Cannot read property 'getBoundingClientRect' of undefined

Your target `ref` is probably not being set correctly.
Double check your [Motion](/motion) elements.

> ** Tip -** If you're having trouble getting ahold of a `ref` think about adding some extra wrapper markup.

```diff
<Motion>
  {motion => (
+    <div {...motion}>
+      <MyComponent />
-      <MyComponent {...motion} />
+    </div>
  )}
</Motion>
```

> ** Tip -** Can't find what you're looking for? [Raise an issue on Github](https://github.com/madou/element-motion/issues/new).

## Styled Components

Using v3? Make sure to use `innerRef`,
like so:

```js
import styled from 'styled-components';

const StyledDiv = styled.div``;

<Motion>{({ ref, ...motion }) => <StyledDiv innerRef={ref} {...motion} />}</Motion>;
```

Using v4? Just use `ref` thanks to `forwardRef()`!

```js
import styled from 'styled-components';

const StyledDiv = styled.div``;

<Motion>{motion => <StyledDiv {...motion} />}</Motion>;
```
